// src/navigation/components/CustomHeader.tsx
import React from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  StatusBar,
  Platform,
} from 'react-native';
import Icon from 'react-native-vector-icons/MaterialIcons';
import LinearGradient from 'react-native-linear-gradient';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

interface CustomHeaderProps {
  title: string;
  subtitle?: string;
  onBack?: () => void;
  rightIcon?: string;
  onRightPress?: () => void;
  gradient?: boolean;
  transparent?: boolean;
}

const CustomHeader: React.FC<CustomHeaderProps> = ({
                                                     title,
                                                     subtitle,
                                                     onBack,
                                                     rightIcon,
                                                     onRightPress,
                                                     gradient = true,
                                                     transparent = false,
                                                   }) => {
  const insets = useSafeAreaInsets();

  const HeaderContent = () => (
    <View style={[styles.container, { paddingTop: insets.top }]}>
      <StatusBar
        barStyle={gradient || !transparent ? 'light-content' : 'dark-content'}
        backgroundColor="transparent"
        translucent
      />

      <View style={styles.content}>
        {onBack && (
          <TouchableOpacity
            style={styles.backButton}
            onPress={onBack}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <Icon
              name="arrow-back"
              size={24}
              color={gradient || !transparent ? '#fff' : '#333'}
            />
          </TouchableOpacity>
        )}

        <View style={styles.titleContainer}>
          <Text style={[
            styles.title,
            !gradient && transparent && styles.titleDark
          ]}>
            {title}
          </Text>
          {subtitle && (
            <Text style={[
              styles.subtitle,
              !gradient && transparent && styles.subtitleDark
            ]}>
              {subtitle}
            </Text>
          )}
        </View>

        {rightIcon && (
          <TouchableOpacity
            style={styles.rightButton}
            onPress={onRightPress}
            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
          >
            <Icon
              name={rightIcon}
              size={24}
              color={gradient || !transparent ? '#fff' : '#333'}
            />
          </TouchableOpacity>
        )}
      </View>
    </View>
  );

  if (gradient) {
    return (
      <LinearGradient
        colors={['#667eea', '#764ba2']}
        style={styles.gradient}
      >
        <HeaderContent />
      </LinearGradient>
    );
  }

  return (
    <View style={[
      styles.normalHeader,
      transparent && styles.transparentHeader
    ]}>
      <HeaderContent />
    </View>
  );
};

const styles = StyleSheet.create({
  gradient: {
    paddingBottom: 15,
  },
  normalHeader: {
    backgroundColor: '#fff',
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  transparentHeader: {
    backgroundColor: 'transparent',
    borderBottomWidth: 0,
  },
  container: {
    paddingTop: Platform.OS === 'ios' ? 44 : StatusBar.currentHeight || 24,
  },
  content: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 15,
    height: 56,
  },
  backButton: {
    padding: 5,
    marginRight: 10,
  },
  titleContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#fff',
  },
  titleDark: {
    color: '#333',
  },
  subtitle: {
    fontSize: 12,
    color: 'rgba(255, 255, 255, 0.8)',
    marginTop: 2,
  },
  subtitleDark: {
    color: '#666',
  },
  rightButton: {
    padding: 5,
    marginLeft: 10,
  },
});

export default CustomHeader;